<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>去哪儿网</title>
	<link rel="stylesheet" href="./css/index.css">
	</head>
	<!-- 
	 
	 注意点:
	 做网格布局时 有可能上下的边框线没有对齐 是因为
	 伸缩布局宽度由里面的内容决定
	  flex-grow: 1;
	  flex-shrink: 1;
	  
	  如果想要对齐 加上 	flex-basis: 0%;
	  或者注释掉上面的 直接使用 flex:1
	 -->
	
 
	<body>
		
	
		
		<div class="header">
			<img src="./images/header.jpg" alt="">
		</div>
		
		
		<div class="main">
			
			<div class="section">
				<div class="col hotel">
					<p>酒店</p>
					<img src="./images/hotel.jpg" alt="">
					
				</div>
				<div class="col">
					<div>特惠酒店</div>
					<div>客栈</div>
				</div>
				<div class="col">
					<div>海外酒店</div>
					<div>民宿</div>
					
				</div>
			</div>
			
			<div class="section">
				<div class="col hotel">
					<p>机票</p>
					<img src="./images/hotel.jpg" alt="">
					
				</div>
				<div class="col">
					<div>低价机票</div>
					<div>火车票</div>
				</div>
				<div class="col">
					<div>汽车票</div>
					<div>专车-自驾</div>
					
				</div>
			</div>
			
			
			
		</div>
		
	</body>
</html>